<template name="songList">
  <div class="song-list">
    <a-list item-layout="horizontal" :data-source="playListTrackAll">
      <template #header>
        <div class="item-header">
          <div class="item-left">
            <span>#</span>
            <span style="margin-left: 0.4375rem">标题</span>
          </div>
          <div class="item-right">
            <p>专辑</p>
            <p>喜欢</p>
            <p>发布时间</p>
          </div>
        </div>
      </template>
      <template #renderItem="{ item, index }">
        <div class="item" @dblclick="play(item.id, index)">
          <div class="item-left">
            <span>{{ index + 1 > 9 ? index + 1 : `0${index + 1}` }}</span>
            <img v-lazy="item.picUrl" alt="zan" />
            <div>
              <p class="over-ellipsis">{{ item.name }}</p>
              <p>超清声带</p>
            </div>
          </div>
          <div class="item-right">
            <p class="over-ellipsis">{{ item.albumName }}</p>
            <p><i class="iconfont icon-love"></i></p>
            <p>{{ dayjs(item.publishTime).format('YYYY-MM-DD') }}</p>
          </div>
        </div>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{ id: string }>()
import { dayjs } from 'element-plus'
import { useSongList_api } from './hooks/useSongListApi'
import { watch } from 'vue'
import { usePlaylistStore } from '@/store/playlist'
const { updatePlaylist, updatePlaylistIndex, updateMusicId, currentPlaylist, getMusicDetail } =
  usePlaylistStore()
const { playListTrackAll } = useSongList_api(props.id)
// 双击播放
const play = (id: number, index: number) => {
  if (currentPlaylist.playlist !== playListTrackAll.value) {
    updatePlaylist(playListTrackAll.value)
  }
  updatePlaylistIndex(index)
  updateMusicId(id)
}
// 点击播放全部
const playAllPlaylist = () => {
  updatePlaylist(playListTrackAll.value)
  updatePlaylistIndex(0)
  updateMusicId(playListTrackAll.value[0].id)
}
const stop = watch(
  () => [playListTrackAll.value, currentPlaylist.isBtnShow],
  () => {
    if (currentPlaylist.isBtnShow && currentPlaylist.playlist !== playListTrackAll.value) {
      // 进入歌单且当前有歌曲在播放,当歌曲播放完后
      playAllPlaylist()
      getMusicDetail(playListTrackAll.value[0].id)
      // 停止当前监听器
      stop()
    }
  }
)
defineExpose({
  playAllPlaylist
})
</script>

<style scoped lang="less">
.song-list {
  .item,
  .item-header {
    display: flex;
    justify-content: space-between;
    padding: 0.3125rem 0;

    .item-left,
    .item-right {
      display: flex;
      align-items: center;
    }

    .item-left {
      width: 30%;
      gap: 0.9375rem;
      color: #2a3246;

      span {
        color: #4d5669;
      }

      div p:nth-child(2) {
        font-size: 0.75rem;
        color: #737c8d;
      }
    }

    .item-right {
      width: 50%;
      justify-content: end;
      color: #4d5669;

      p {
        text-align: center;
      }

      & p:nth-child(1) {
        width: 70%;
        text-align: left;
      }

      & p:nth-child(2) {
        width: 15%;
      }

      & p:nth-child(3) {
        width: 15%;
      }
    }

    img {
      width: 2rem;
      height: 2rem;
      border-radius: 0.25rem;
    }
  }
}
</style>
